<!DOCTYPE html>
	<head>
		<meta charset="utf-8">
		<title>标题</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				position: fixed;
				top: 50%;
				left: 50%;
				margin-top: -40vh;
				margin-left: -40vw;
				width: 80vw;
				height: 80vh;
				border: 1px solid #ccc;
			}
			.aa {
	    	width: 100%;
	    	height: 100%;
	    }
		</style>
	</head>
	<body>
		<button onclick="aaInitCornerstone()">改变</button>
		<div class="box">
			<div class="aa"></div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<script src="./static/hammer.js"></script>
		<script src="./static/cornerstone.min.js"></script>
		<script src="./static/cornerstoneMath.min.js"></script>
		<script src="./static/cornerstoneWADOImageLoader.min.js"></script>
		<script src="./static/cornerstoneWebImageLoader.min.js"></script>
		<script src="./static/cornerstoneTools.min.js"></script>
		<script src="./static/dicomParser.min.js"></script>
		<script>
			
			const baseUrl = "http://127.0.0.1:8000/static/js/";
			var oContext = null;
			var paths = [];
			var oCtr = {
			 		center_x: 1277,
					heart_x_begin_left: 936,
					heart_x_end_right: 2100,
					heart_y_begin_left: 1531,
					heart_y_end_right: 1621,
					lung_x_begin: 170,
					lung_x_end: 2348,
					lung_y: 1565,
					ratio: 0.5344,
		  	}
		  var startCtr = null;

			window.onload = function () {
				_initCornerstone();

				aaInitCornerstone();

				bindMouseEvent();

			}

			function _initCornerstone() {
		      cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
		      cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
		      cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
		      cornerstoneTools.external.cornerstone = cornerstone;
		      cornerstoneTools.external.Hammer = Hammer;

		      // Image Loader
		      const config = {
		          webWorkerPath: `${baseUrl}assets/image-loader/cornerstoneWADOImageLoaderWebWorker.js`,
		          taskConfiguration: {
		              decodeTask: {
		                  codecsPath: `${baseUrl}assets/image-loader/cornerstoneWADOImageLoaderCodecs.js`,
		              },
		          },
		      };
		      cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
		  }

		  // 初始化影像
		  function aaInitCornerstone() {
		  		let element = document.querySelector('.aa');
		      cornerstone.enable(element);
		      cornerstone.loadAndCacheImage('wadouri:http://localhost:8088/static/data/1.2.840.1.19439.0.1000.20220101135814.1480.10000.3383824/1.2.840.113564.12312312366.2022010113510529628.1003000225002').then(function (image) {
		          var viewport = cornerstone.getDefaultViewportForImage(element, image);
		          cornerstone.displayImage(element, image, viewport);
		      });
		      element.addEventListener('cornerstoneimagerendered', onImageRendered);
		  }

		  function bindMouseEvent() {
		  	var isDown = false;
		  	var downx = 0, downy = 0;

		  	$('.aa').on('mousedown', 'canvas', function (e) {
		  		var canvas = this;
		  		var rect = canvas.getBoundingClientRect();
		  		var x = e.clientX - rect.left;
		  		var y = e.clientY - rect.top;
		  		paths.forEach(function (item) {
		  			if(oContext.isPointInPath(item.path, x, y)) {
		  				isDown = true;
		  				startCtr = JSON.parse(JSON.stringify(oCtr));
		  				downx = e.pageX;
		  				downy = e.pageY;
		  			}
		  		})
		  	})

		  	$('.aa').on('mousemove', 'canvas', function(e) {
		  		var canvas = this;
		  		var rect = canvas.getBoundingClientRect();
		  		var x = e.clientX - rect.left;
		  		var y = e.clientY - rect.top;

		  		// 如果当前是按下
		  		if(isDown) {
		  			for(let i = 0; i < paths.length; i++) {
		  				let item = paths[i];
		  				if(oContext.isPointInPath(item.path, x, y)) {
		  					var movex = e.pageX - downx;
            		var movey = e.pageY - downy;

            		saveDrag(item.key, item.dis, movex, movey);

		  					break;
		  				}
		  			}

		  		} else { // 非按下，移动改变canvas鼠标形状
		  			for(let i = 0; i < paths.length; i++) {
		  				let item = paths[i];
		  				if(oContext.isPointInPath(item.path, x, y)) {
			  				canvas.style.cursor = item.cursor;
			  				break;
			  			} else {
			  				canvas.style.cursor = '';
			  			}
		  			}
		  		}
		  	})

		  	window.addEventListener('mouseup', function () {
		  		isDown = false;
		  	})
		  }

		  // 保存移动结果
	    function saveDrag(key, dis, movex, movey) {
	      	oCtr[key] = (dis == 'x' ? movex : movey)+startCtr[key];
	      	aaInitCornerstone();

	        // // 改变值
	        // this.newctr[this.move.key] = (this.move.dis == 'x' ? movex : movey)*this.ratio+this.move.startCtr[this.move.key];
	        // // 计算心胸比
	        // this.newctr.ratio = (this.newctr.heart_x_end_right-this.newctr.heart_x_begin_left)/(this.newctr.lung_x_end-this.newctr.lung_x_begin);
	        // // 画内容
	        // this.drawLine();
	    }

		  function onImageRendered(e) {
		  	oContext = e.detail.canvasContext;


		  	drawCTR(oCtr, oContext);
		  }

		  function drawCTR(ctr, context) {

		  		paths = [];

		  		let path = null;

			    context.beginPath();
			    context.lineWidth = 15;
			    context.strokeStyle = "green"
			    context.moveTo(ctr.lung_x_begin, ctr.lung_y);
			    context.lineTo(ctr.lung_x_end, ctr.lung_y);
			    context.closePath();
			    context.stroke();

			    // 绿色中线
			    path = new Path2D();
			    path.moveTo(ctr.lung_x_begin+20, ctr.lung_y-8);
			    path.lineTo(ctr.lung_x_end-20, ctr.lung_y-8);
			    path.lineTo(ctr.lung_x_end-20, ctr.lung_y+8);
			    path.lineTo(ctr.lung_x_begin+20, ctr.lung_y+8);
			    paths.push({
			    	cursor: 'n-resize',
			    	dir: 'y',
			    	path: path,
			    	key: 'lung_y'
			    });
			    // 绿色左
			    path = new Path2D();
			    path.moveTo(ctr.lung_x_begin, ctr.lung_y-8);
			    path.lineTo(ctr.lung_x_begin+20, ctr.lung_y-8);
			    path.lineTo(ctr.lung_x_begin+20, ctr.lung_y+8);
			    path.lineTo(ctr.lung_x_begin, ctr.lung_y+8);
			    paths.push({
			    	cursor: 'e-resize',
			    	dir: 'x',
			    	path: path,
			    	key: 'lung_x_begin'
			    });
			    // 绿色右
			    path = new Path2D();
			    path.moveTo(ctr.lung_x_end-20, ctr.lung_y-8);
			    path.lineTo(ctr.lung_x_end, ctr.lung_y-8);
			    path.lineTo(ctr.lung_x_end, ctr.lung_y+8);
			    path.lineTo(ctr.lung_x_end-20, ctr.lung_y+8);
			    paths.push({
			    	cursor: 'e-resize',
			    	dir: 'x',
			    	path: path,
			    	key: 'lung_x_end'
			    });


			    centerX = (ctr.lung_x_begin + ctr.lung_x_end) / 2
			    Y = [ctr.lung_y, ctr.heart_y_begin_left, ctr.heart_y_end_right]
			    minY = Math.min(...Y)
			    maxY = Math.max(...Y)
			    context.strokeStyle = "black"
			    context.beginPath();
			    context.moveTo(centerX, minY - 50);
			    context.lineTo(centerX, maxY + 50);
			    context.closePath();
			    context.stroke();


			    context.strokeStyle = "red"
			    context.beginPath();
			    context.moveTo(ctr.heart_x_begin_left, ctr.heart_y_begin_left);
			    context.lineTo(centerX, ctr.heart_y_begin_left);
			    context.closePath();
			    context.stroke();

			    // 红色线
			    path = new Path2D();
			    path.moveTo(ctr.heart_x_begin_left+20, ctr.heart_y_begin_left-8);
			    path.lineTo(centerX, ctr.heart_y_begin_left-8);
			    path.lineTo(centerX, ctr.heart_y_begin_left+8);
			    path.lineTo(ctr.heart_x_begin_left+20, ctr.heart_y_begin_left+8);
			    paths.push({
			    	cursor: 'n-resize',
			    	dir: 'y',
			    	path: path,
			    	key: 'heart_y_begin_left'
			    });
			    // 红色左
			    path = new Path2D();
			    path.moveTo(ctr.heart_x_begin_left, ctr.heart_y_begin_left-8);
			    path.lineTo(ctr.heart_x_begin_left+20, ctr.heart_y_begin_left-8);
			    path.lineTo(ctr.heart_x_begin_left+20, ctr.heart_y_begin_left+8);
			    path.lineTo(ctr.heart_x_begin_left, ctr.heart_y_begin_left+8);
			    paths.push({
			    	cursor: 'e-resize',
			    	dir: 'x',
			    	path: path,
			    	key: 'heart_x_begin_left'
			    });

			    context.beginPath();
			    context.moveTo(centerX, ctr.heart_y_end_right);
			    context.lineTo(ctr.heart_x_end_right, ctr.heart_y_end_right);
			    context.closePath();
			    context.stroke();
			
			    // 红色线
			    path = new Path2D();
			    path.moveTo(centerX, ctr.heart_y_end_right-8);
			    path.lineTo(ctr.heart_x_end_right-20, ctr.heart_y_end_right-8);
			    path.lineTo(ctr.heart_x_end_right-20, ctr.heart_y_end_right+8);
			    path.lineTo(centerX, ctr.heart_y_end_right+8);
			    paths.push({
			    	cursor: 'n-resize',
			    	dir: 'y',
			    	path: path,
			    	key: 'heart_y_end_right'
			    });
			    // 红色右
			    path = new Path2D();
			    path.moveTo(ctr.heart_x_end_right-20, ctr.heart_y_end_right-8);
			    path.lineTo(ctr.heart_x_end_right, ctr.heart_y_end_right-8);
			    path.lineTo(ctr.heart_x_end_right, ctr.heart_y_end_right+8);
			    path.lineTo(ctr.heart_x_end_right-20, ctr.heart_y_end_right+8);
			    paths.push({
			    	cursor: 'e-resize',
			    	dir: 'x',
			    	path: path,
			    	key: 'heart_x_end_right'
			    });

			}

			  

		</script>
	</body>
</html>